/* regen.css */
/* ===================== 태양광 잠재량 관련 ===================== */

/* 전용 그라디언트 스타일 */
/* 이론적 잠재량 - 옥상 (bldg) */
.legend-bar.kier-thry-bldg .legend-gradient {
  background: linear-gradient(to right,
    #2b83ba 0%,
    #9dd3a6 20%,
    #ecf7b9 40%,
    #fec980 60%,
    #f99d59 80%,
    #d7191c 100%
  );
}

/* 이론적 잠재량 - 지상 (grnd) → 예시로 값 다르게 지정 */
.legend-bar.kier-thry-grnd .legend-gradient {
  background: linear-gradient(to right,
    #2b83ba 0%,
    #9dd3a6 20%,
    #ecf7b9 40%,
    #fec980 60%,
    #f99d59 80%,
    #d7191c 100%
  );
}

.legend-bar.kier-tech-bldg .legend-gradient {
  background: linear-gradient(to right,
    #2b83ba 0%,
    #64abb0 20%,
    #c7e8ad 40%,
    #ffedaa 60%,
    #f99d59 80%,
    #d7191c 100%
  );
}

.legend-bar.kier-tech-grnd .legend-gradient {
  background: linear-gradient(to right,
    #2b83ba 0%,
    #64abb0 20%,
    #c7e8ad 40%,
    #ffedaa 60%,
    #f99d59 80%,
    #d7191c 100%
  );
}

.legend-bar.kier-mrkt-bldg .legend-gradient {
  background: linear-gradient(to right,
    #2b83ba 0%,     /* 6.5121 */
    #64abb0 25%,    /* 6.5362 */
    #c7e8ad 50%,    /* 6.5708 */
    #f99d59 75%,    /* 6.6142 */
    #d7191c 100%    /* 6.7133 */
  );
}

.legend-bar.kier-mrkt-grnd .legend-gradient {
  background: linear-gradient(to right,
    #2b83ba 0%,     /* 8.0120 */
    #64abb0 25%,    /* 8.6384 */
    #c7e8ad 50%,    /* 8.7037 */
    #f99d59 75%,    /* 8.7743 */
    #d7191c 100%    /* 8.9052 */
  );
}

.poten-white-btn#potenBtSetArea {
    background: #0868ac;
    color: #fff;
    height: 3.2rem;
    border-radius: 1.6rem;
    font-size: 1.5rem;
    width: 100%;
}

#panel-poten .view--panel02--item.compare .view--panel02--item--ti {
    margin-bottom: 0 !important;
}


/* ===================== 태양광 발전현황 관련 ===================== */
/* 발전소 아이콘 */
.icon-pp-industry,
.icon-pp-logistics,
.icon-pp-house,
.icon-pp-apartment,
.icon-pp-public,
.icon-pp-etc-bldg,
.icon-pp-farm,
.icon-pp-mountain,
.icon-pp-water,
.icon-pp-parking,
.icon-pp-etc-land,
.icon-pp-plan,
.icon-pp-biz,
.icon-pp-home, 
.icon-pp-bld,
.icon-pp-land {
  width: 32px;
  height: 32px;
  background: no-repeat center / contain;
}


.icon-pp-industry {
  background-image: url("/gcs/images/regen/icon-pp-industry.png");
}
.icon-pp-logistics {
  background-image: url("/gcs/images/regen/icon-pp-logistics.png");
}
.icon-pp-house {
  background-image: url("/gcs/images/regen/icon-pp-house.png");
}
.icon-pp-apartment {
  background-image: url("/gcs/images/regen/icon-pp-apartment.png");
}
.icon-pp-public {
  background-image: url("/gcs/images/regen/icon-pp-public.png");
}
.icon-pp-etc-bldg {
  background-image: url("/gcs/images/regen/icon-pp-etc-bldg.png");
}
.icon-pp-farm {
  background-image: url("/gcs/images/regen/icon-pp-farm.png");
}
.icon-pp-mountain {
  background-image: url("/gcs/images/regen/icon-pp-mountain.png");
}
.icon-pp-water {
  background-image: url("/gcs/images/regen/icon-pp-water.png");
}
.icon-pp-parking {
  background-image: url("/gcs/images/regen/icon-pp-parking.png");
}
.icon-pp-etc-land {
  background-image: url("/gcs/images/regen/icon-pp-etc-land.png");
}
.icon-pp-plan {
  background-image: url("/gcs/images/regen/icon-pp-plan.png");
}
.icon-pp-biz {
  background-image: url("/gcs/images/regen/icon-pp-biz.png");
}
.icon-pp-home {
  background-image: url("/gcs/images/regen/icon-pp-home.png");
}
.icon-pp-bld {
  background-image: url("/gcs/images/regen/icon-pp-bld.png");
}
.icon-pp-land {
  background-image: url("/gcs/images/regen/icon-pp-land.png");
}

/* 발전소 텍스트 */
.title-pp {
  font-size: 1.4rem;
}
.power-plant-box {
  padding: 1rem;
}
.power-plant-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1rem;
}
.power-plant-item:first-child {
  margin-top: 0;
}

/* 연간 발전예측량 카드 영역 */
.power-stats {
  display: block;
  margin-bottom: 2rem;
}

/* 절감 효과 */
.effect-area .effect-title {
  margin-bottom: 1rem;
  font-size: 1.8rem;
}
.effect-area .effect-boxes {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
}
.effect-area .effect-item {
  text-align: center;
  flex: 1;
  position: relative;
}
.effect-img-wrap {
  position: relative;
  display: inline-block;
}
.effect-img {
  width: 100%;
  max-width: 250px;
  border-radius: 0.4rem;
}
.effect-banner {
  position: absolute;
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 0.3rem 0.6rem;
  border-radius: 0.3rem;
  font-size: 1.2rem;
  white-space: nowrap;
}
.effect-value .effect-num {
  color: #009933;
  font-weight: bold;
}
.effect-value .effect-unit {
  color: #000;
  font-weight: normal;
}
.effect-detail {
  margin-top: 0.5rem;
  font-size: 1.3rem;
  color: #666;
}

/* POI 팝업 */
.poi-popup {
  position: absolute;
  z-index: 1000;
  display: none;
  width: 300px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: 'Pretendard', 'Arial', sans-serif;
}

.popup-inner {
  padding: 16px;
  box-sizing: border-box;
  position: relative;
}

/* 헤더 (제목 + 닫기 버튼) */
.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 6px;
}

/* 제목 */
.popup-header h4 {
  margin: 0;
  font-size: 16px;
  color: #2c3e50;
}

/* 닫기 버튼 */
.popup-header .close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* 테이블 */
.info-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.info-table th,
.info-table td {
  border: 1px solid #ddd;
  padding: 8px;
  font-size: 14px;
  line-height: 1.4;
  vertical-align: top;
}

.info-table th {
  width: 80px;
  background: #f9f9f9;
  color: #333;
  text-align: left;
  white-space: nowrap;
}

.info-table td {
  color: #333;
}

.SNB .SNB--view--panel.view--panel02 .view--panel02--foot #statusBtCompare {
    background: #0868ac;
    color: #fff;
}

/* ② 헤더 색상: 태양광 전용 */
.modal--head.solar {
    background: #0868ac;
}

/* ③ 아이템 강조 스타일: 태양광 전용 */
.village--item.first-solar {
    border: 2px solid #0868ac;
}

.village--item.first-solar .village--item--head h3 {
    color: #0868ac;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.village--item.first-solar .village--item--head h3:after {
    display: inline-block;
    content: "";
    background-image: url("/gcs/assets/images/modal/ico-solar.png");
    width: 1.5rem;
    height: 1.7rem;
}

#statusDiPannel .chart-button-area {
	display: flex;
	justify-content: space-between;
	gap: 5px;
	margin-bottom: 12px;
}

#statusDiPannel .chart-button-area .chart-button {
	font-size: 14px;
	min-width: 0;
	width: 100%;
	border: solid 1px #c6c6c6;
	border-radius: 15px;
	background-color: #fff;
	margin-bottom: 5px;
	padding: 4px 8px;
	line-height: 1.0;

	display: flex;
	align-items: center;
	justify-content: center;

	text-align: center;
	white-space: pre-line;
	cursor: pointer;
	user-select: none;
}

.solar-color {
    color: #0f68a9;
}

/* 기본 상태 */
#statusDiPannel .chart-button-area .chart-button {
	border-color: #c6c6c6;
	color: #c6c6c6;
}

#statusDiPannel .chart-button-area .chart-button.active[data-type="total"] {
	border-color: #6693a1;
	color: #6693a1;
}

#statusDiPannel .chart-button-area .chart-button.active[data-type="biz"] {
	border-color: #0f68a9;
	color: #0f68a9;
}

#statusDiPannel .chart-button-area .chart-button.active[data-type="home"] {
	border-color: #3a6241;
	color: #3a6241;
}

#statusDiPannel .chart-button-area .chart-button.active[data-type="unreg"] {
	border-color: #c85542;
	color: #c85542;
}


#statusComparison .village--item--data dl dd .equal {
    position: relative;
    display: inline-block;
    font-size: 1.3rem;
    color: #2F9D27;
    text-align: right;
    font-weight: normal;
}

.score-btn#statusBtCompare {
    background: #0868ac;
    color: #fff;
    height: 3.2rem;
    border-radius: 1.6rem;
    font-size: 1.5rem;
    width: 100%;
}

#panel-poten .view--panel02--item.compare .view--panel02--item--ti,
.statusDiPannel .view--panel02--item.compare .view--panel02--item--ti {
    margin-bottom: 0 !important;
}

/* ===================== 태양광 규제지역 관련 ===================== */
.adopt-legend-color {
    width: 60%;
    height: 60%;
    border-radius: 20px;
    display: block;
}

/* ========== 지리적 요인 ========== */
.adopt-slope-20over { background-color: #ff6347; }       /* 경사도 20도 이상 */
.adopt-altitude-1000 { background-color: #a0522d; }      /* 고도 1000m 이상 */
.adopt-landslide-grade1 { background-color: #b22222; }   /* 산사태 1등급 */
.adopt-mountain-river { background-color: #0288d1; }     /* 산지하천 */

/* ========== 규제 요인 ========== */
.adopt-agriculture { background-color: #689f38; }        /* 농업진흥지역 */
.adopt-airport { background-color: #1565c0; }            /* 공항 */
.adopt-impossible-area { background-color: #cc3300; }    /* 개발불가지역 */
.adopt-road-map { background-color: #9e9e9e; }           /* 도로(수치지형도) */

/* 생태자연도 항목 분리 */
.adopt-eco-grade1 { background-color: #558b2f; }         /* 생태자연도 1등급 */
.adopt-semngar-area { background-color: #ffe082; }       /* 별도관리지역 */

.adopt-eco-preservation { background-color: #2e7d32; }   /* 자연환경보전지역 */
.adopt-settlement-area { background-color: #f57c00; }    /* 취락지역 */
.adopt-cultural-heritage { background-color: #bc8f8f; }  /* 문화재 */

#statusComparison .village--item--data dl {
	min-height: 7.65rem;
}

/* END */


/* 
모바일 */
@media (max-width: 768px) {
  .potenPixelInfoPopup,
  .potenDiSetAreaPopup {
    left: 50% !important;
    top: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: 92vw !important;
    max-width: 420px;
    min-width: 240px;
    z-index: 10000;
    position: fixed !important;
    /* 필요에 따라 padding, border-radius 등 */
  }
}

@media (max-width: 768px) {
  #statusPoiPopup.layer--pop,
  #statusClusterPopup.layer--pop {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    z-index: 9999 !important;
    box-shadow: none !important;
    overflow-y: auto !important;
    background: #fff !important;
    padding: 0.8rem !important;
  }
}